<template>
    <div class="mem">
        <loading :state="state"></loading>
        <div class="top">
            <ul class="top1">
                <li v-for="(item , index) in btn_One" @click="checkFun(index)"
                    :class="[normalone,{activesone:index === indexsone}]"
                    :key="item.id">
                    {{item.name}}
                </li>
            </ul>
            <ul class="top2" v-show="secState">
                <li v-for="(item , index) in btn_Sec" @click="checkFun2(index)"
                    :class="[normalsec,{activessec:index === indexssec}]"
                    :key="item.id">
                    {{item.name}}
                </li>
            </ul>
            <!--<div class="basicsline"></div>-->
            <div class="top3">
                <ul class="top3_in">
                    <li v-for="(item , index) in btn_Thr" @click="checkFun3(index)"
                        :class="[normalthr,{activesthr:index === indexsthr}]"
                        :key="item.id">
                        {{item.name}}
                    </li>
                </ul>
                <div class="top3_r" @click="sortFun">
                    <p>排序</p>
                    <img :src="this.$Public.iconImg+'triangle.svg'" alt="" :class="[icon,{sort:sorts} ]">
                </div>
            </div>
        </div>
        <member-list-statistics :memListM="memListM"></member-list-statistics>
        <ul v-infinite-scroll="loadMore"
            infinite-scroll-disabled="false"
            infinite-scroll-distance="1"
            infinite-scroll-immediate-check="true"
            class="main"
        >
            <li v-for="(item , index) in memList" class="main_cell" :key="item.id">
                <member-list-item :item="item" :index="index"></member-list-item>
            </li>
            <listload :stateLoad="loading"></listload>
            <p v-show="LastData" class="last">敬请期待更多产品</p>
        </ul>
    </div>
</template>
<script type="text/ecmascript-6">
//  import Public from '@/assets/js/public';
  import memberListItem from '@/components/spread/MemberlistItem.vue';
  import memberListStatistics from '@/components/spread/Memberliststatistics.vue';
  export default {
    name: `memberlist`,
    components: {memberListItem, memberListStatistics},
    data() {
      return {
        state: true,
        stateLoad: false,
        secState: true,
        btn_One: [
          {name: '消费分销', active: 1},
          {name: '代理商分销', active: 2},
          {name: '代理商推代', active: 3}
        ],
        normalone: 'instart',
        indexsone: 0,
        btn_Sec: [
          {name: '全部', active: 1},
          {name: '第一消费', active: 2},
          {name: '第二消费', active: 3},
          {name: '第三消费', active: 4}
        ],
        normalsec: 'insec',
        indexssec: 0,
        btn_Thr: [
          {name: '全部', active: 1},
          {name: '本月', active: 2},
          {name: '今日', active: 3}
        ],
        normalthr: 'inthr',
        indexsthr: 0,
        sorts: false, // 排序样式变量
        sortState: 'asc', // 排序变量(升序降序)
        icon: 'icon',
        memListM: {}, // 统计数据
        memList: [], // 成员列表主体数据
        loading: false, // 滑到底部加载
        LoadData: true, // 是否应该调用获取数据方法
        LastData: false // 数据是否加载完没有了
      };
    },
    created() {
      this.getDataM(); // 调用获取统计数据
      this.loadMore(); // 调用获取统计数据方法
    },
    methods: {
      checkFun(index) {
        if (index === 0) {
          this.btn_Sec = [
            {name: '全部', active: 1},
            {name: '第一消费', active: 2},
            {name: '第二消费', active: 3},
            {name: '第三消费', active: 4}
          ];
          this.secState = true;
        } else if (index === 1) {
          this.secState = false;
        } else {
          this.secState = true;
          this.btn_Sec = [
            {name: '总代', active: 1},
            {name: '区代', active: 2},
            {name: '合伙人', active: 3},
            {name: 'VIP', active: 4}
          ];
        }
        // 调用查询方法
        //  如果筛选条件改变了，调用查询方法
        if (index !== this.indexsone) {
          this.loadMoreOut();
        }
        this.indexsone = index;
      },
      checkFun2(index) {
        // 调用查询方法
        //  如果筛选条件改变了，调用查询方法
        if (index !== this.indexssec) {
          this.loadMoreOut();
        }
        this.indexssec = index;
      },
      checkFun3(index) {
        // 调用查询方法
        //  如果筛选条件改变了，调用查询方法
        if (index !== this.indexsthr) {
          this.loadMoreOut();
        }
        this.indexsthr = index;
      },
      sortFun() {
        // 切换排序方法1
        this.sorts = !this.sorts; // 切换样式
        this.sorts === true ? this.sortState = 'asc' : this.sortState = 'des';
        console.log('this.sortState', this.sortState);
        this.loadMoreOut();
      },
      getDataM() {
        // 获取统计数据
        this.$Spread.getmemListM().then(res => {
          this.memListM = res;
          this.state = false;
        }, () => {
          this.state = false;
        });
      },
      getDataCond() {
        // 根据条件查询数据
        // 清空当前列表中数据
        this.memList = {};
        // 查询到前动画
        this.stateLoad = true;
        this.$Spread.getmemList().then(res => {
          this.memList = res;
          this.memList.map(item => {
            item.closeState = false;
          });
          // 去掉动画
          this.stateLoad = false;
        });
      },
      loadMore(type) {
        // 获取数据和上拉加载共用方法
        console.log(this.LoadData);
        if (this.LoadData === true) {
          // 上拉加载更多
          this.loading = true;
          // 封掉查询数据接口
          this.LoadData = false;
          setTimeout(() => {
            this.$Spread.getmemList().then(res => {
              // 去掉初始遮罩
              this.state = false;
              // 组装数据
              res.data.map((item, index) => {
                item.closeState = false;
                this.memList.push(item);
              });
              console.log('this.memList', this.memList);
              // 对返回数据的数量进行判断，如果小于每页规定的就不要再请求了
              let DataNum = res.data.length;
              if (DataNum < 10) {
                this.LoadData = false;
                this.loading = false;
                this.LastData = true;
                return;
              }
              console.log(DataNum);
              // 查看本地组装后的数据
              console.log('this.memList', this.memList);
              // 去掉上拉加载动画
              this.loading = false;
              //  打开查询数据接口
              this.LoadData = true;
            });
          }, 1000);
        }
      },
      loadMoreOut() {
        // 点击头部按钮根据条件查询的方法
        this.memList = []; // 主数据清空
        this.LoadData = true;// 防止不能发送请求
        this.LastData = false;// 更好的显示，把没有更多隐藏
        this.loadMore();
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import "../../assets/stylus/main.styl"
    .main {
        box-sizing border-box;
    }

    .main_cell {
        box-sizing border-box;
        margin-top: 2vw
    }

    .sort {
        transform: rotate(180deg);
    }

    .min_s {
        word(13px, #666)
    }

    .min_sp {
        word(16px, #666)
    }

    .main_t {
        word(16px, #000)
    }

    .icon {
        width: 3vw
    }

    .top3_r {
        flex 1;
        flex-x();
        justify-content: space-around
    }

    .top3_in {
        flex-x();
        flex: 3;
        justify-content: flex-start;
        & li {
            text-align center;
            width vw(66px);
        }
    }

    .inthr {
        word(13px, #333);
    }

    .activesthr {
        color: main-color
    }

    .top3 {
        flex-x();
        width 100vw;
        box-sizing border-box;
        padding: 0 3vw;
        bor-t(1px, #e2e2e2);
        bor-b(1px, #e2e2e2);
        height: vw(32px)
    }

    .basicsline {
        width: 100vw;
        height: 1px;
        background: border-color
    }

    .insec {
        background #eee;
        width vw(66px);
        word(13px, #333);
        text-align: center;
        line-height: vw(23px);
        border-radius: vw(5px);
        margin-right: 6vw;
    }

    .activessec {
        color: main-color;
        border(1px, main-color);
        background: #fff
    }

    .top1 {
        flex-x();
        width: 100vw;
        box-sizing: border-box;
        justify-content: flex-start;
        padding: 0 3vw;
    }

    .top2 {
        flex-x();
        width: 100vw;
        box-sizing: border-box;
        justify-content: flex-start;
        padding: 0 3vw;
        height: 10vw
    }

    .top {
        width: 100vw;
        background: #fff;
        flex-y();
    }

    .instart {
        word(13px, #333);
        width: vw(66px);
        line-height: 2;
        margin-right: 6vw;
        text-align center
    }

    .activesone {
        color: main-color
    }

    .out {
        width: 100vw;
        flex-x();
        height: 20vw
    }

</style>
